HTMLify

body {
    background: #121314;
    height: 100vh;
    display: grid;
    place-items: center;
}

.nav {
    --color: #ffffff;
    background: none;
    width: 100px;
    height: 56px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav svg {
    fill: none;
    stroke: var(--color);
    stroke-width: 7px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav svg use:nth-of-type(1) {
    opacity: 1;
    stroke-dashoffset: 221;
    stroke-dasharray: 46 249;
    transition: stroke-dashoffset 0.12s linear 0.2s, stroke-dasharray 0.12s linear 0.2s, opacity 0s linear 0.2s;
}

.nav svg use:nth-of-type(2) {
    animation: stroke-animation-reverse 1.2s ease-out forwards;
}

.nav input {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
}

.nav input:checked+svg use:nth-of-type(1) {
    stroke-dashoffset: 175;
    stroke-dasharray: 0 295;
    opacity: 0;
    transition: stroke-dashoffset 0.07s linear 0.07s, stroke-dasharray 0.07s linear 0.07s, opacity 0s linear 0.14s;
}

.nav input:checked+svg use:nth-of-type(2) {
    animation: stroke-animation 1.2s ease-out forwards;
}

@keyframes stroke-animation {
    0% {
        stroke-dashoffset: 295;
        stroke-dasharray: 25 270;
    }

    50% {
        stroke-dashoffset: 68;
        stroke-dasharray: 59 236;
    }

    65% {
        stroke-dashoffset: 59;
        stroke-dasharray: 59 236;
    }

    100% {
        stroke-dashoffset: 68;
        stroke-dasharray: 59 236;
    }
}

@keyframes stroke-animation-reverse {
    0% {
        stroke-dashoffset: 68;
        stroke-dasharray: 59 236;
    }

    50% {
        stroke-dashoffset: 290;
        stroke-dasharray: 25 270;
    }

    65% {
        stroke-dashoffset: 295;
        stroke-dasharray: 25 270;
    }

    100% {
        stroke-dashoffset: 290;
        stroke-dasharray: 25 270;
    }
}